<template>
  <view>
    <headerss title='订单详情'></headerss>

    <view class="remaining_time">
      <view>已完成</view>
      <view class="time">
        <text>您已确认签收</text>
      </view>

      <!-- 订单 -->
      <view class="address">
        <view class="address1">
          <image src="../../static/imgs/Frame 1505.png" mode=""></image>
          <view class="">
            <view class="name">
              <text>您已确认签收</text>
            </view>
            <view class="position">2023-09-06 20:30</view>
          </view>

        </view>
        <view class="address2">
          <image src="../../static/imgs/Frame 1504 (1).png" mode=""></image>
          <view class="">
            <view class="name">
              <text>千舟寻嘟</text>
              <text>1234678910</text>
            </view>
            <view class="position">山东省济南市历下区解放路112号历东商务大厦1210</view>
          </view>
        </view>
      </view>

      <!-- 店铺 -->
      <view class="store">
        <view class="store_title">
          <image src="../../static/img/gy.png" mode=""></image>
          <text>升光官方店铺</text>
        </view>

        <view class="store_img">
          <image src="../../static/img/tx.jpg" mode=""></image>
          <view>
            <view class="title">原神温迪神之眼周边蒙德项链手链挂饰铜镀18K金</view>
            <text class="name">温迪风神之眼</text>
            <view class="price">￥<text>100</text></view>
          </view>
        </view>
      </view>
    </view>



    <!-- 留言 -->
    <view class="message">
      <text>买家留言</text>
      <view class="message_content">我要一个蒙德城风神温迪的神之眼，千万不要发错了，谢谢</view>
    </view>

    <!-- 订单号 -->
    <view class="order_number">
      <view class="order_flex">
        <text>订单编号 :</text>
        <view class="">289015481019854</view>
      </view>
      <view class="order_flex">
        <text>下单时间 :</text>
        <view class=""><text style="margin-right: 20rpx;">2023-09-06 </text>13:48</view>
      </view>
      <view class="order_flex">
        <text>订单金额 :</text>
        <view class="">￥ 100</view>
      </view>
      <view class="fukuan">
        <text style="color: #999999;">实付款 :</text>
        <view>
          ￥<text>100</text>
        </view>
      </view>
    </view>

    <!-- 脚部 -->
    <view class="footer">
      <button class="qxzf">发起售后</button>
      <button class="ljzf">再次购买</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    methods: {

    }
  }
</script>

<style scoped lang="scss">
  .remaining_time {
    padding: 30rpx 0 0 32rpx;
    width: 750rpx;
    height: 400rpx;
    background: linear-gradient(180deg, #3369FF 0%, rgba(51, 105, 255, 0) 100%);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;

    >view:first-child {
      width: 192rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #FFFFFF;
      margin-bottom: 16rpx;
      margin-left: 18rpx;
    }

    .time {
      margin-left: 18rpx;

      text {
        // width: 174rpx;
        height: 28rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.7);
      }
    }
  }

  // 订单
  .order_form {
    // margin-top: 30rpx;
    // width: 686rpx;
    // height: 302rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  // 店铺
  .store {
    // margin: 100rpx 32rpx 0;
    margin-top: 20rpx;
    padding: 30rpx;
    width: 686rpx;
    height: 326rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    .store_title {
      image {
        width: 36rpx;
        height: 36rpx;
        margin-right: 20rpx;
      }

      text {
        display: inline;
        width: 222rpx;
        height: 32rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #333333;
      }
    }

    .store_img {
      margin-top: 30rpx;
      display: flex;

      image {
        margin-right: 20rpx;
        width: 200rpx;
        height: 200rpx;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
      }

      .title {
        width: 406rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;
        line-height: 40rpx;
      }

      .name {
        display: inline-block;
        margin: 30rpx 0 20rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #999999;
      }

      .price {
        font-size: 28rpx;
        font-weight: bold;
        color: #FA4343;

        >text {

          font-size: 40rpx;
          font-weight: bold;
          color: #FA4343;
        }
      }
    }
  }

  // 地址
  .address {
    // margin: 100rpx 32rpx 0;
    // margin: 0 32rpx 0;
    margin-top: 30rpx;
    position: relative;
    padding: 30rpx 32rpx;
    width: 686rpx;
    height: 302rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    .address1 {
      display: flex;
    }

    .address2 {
      display: flex;
    }


    image {
      margin-right: 22rpx;
      width: 28rpx;
      height: 32rpx;
      // background: #333333;
    }

    .name {
      margin-bottom: 18rpx;

      >text {
        margin-right: 33rpx;
        // width: 128rpx;
        height: 32rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #333333;
        line-height: 32rpx;
      }
    }

    .position {
      letter-spacing: 2rpx;
      width: 574rpx;
      height: 64rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #999999;
      line-height: 40rpx;
    }
  }

  // 留言
  .message {
    // margin: 100rpx 32rpx 0;
    display: flex;
    justify-content: space-between;
    margin: 420rpx 32rpx 0;
    padding: 30rpx;
    width: 686rpx;
    height: 124rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    >text {
      width: 165rpx;
      margin-right: 20rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #999999;
    }

    .message_content {
      text-align: right;
      line-height: 40rpx;
    }
  }

  // 订单号
  .order_number {
    margin: 20rpx 32rpx 0;
    padding: 30rpx;
    width: 686rpx;
    height: 298rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    .order_flex:nth-child(3) {
      margin-bottom: 20rpx;
      border-bottom: 1px solid #eee;
    }

    .order_flex {
      display: flex;
      justify-content: space-between;
      padding-bottom: 25rpx;

      >text {
        font-size: 28rpx;
        font-weight: 500;
        color: #999999;
      }

      >view {
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;
      }
    }

    .fukuan {
      display: flex;
      justify-content: space-between;

      >view {
        color: red;
        margin-right: 20rpx;

        text {
          font-size: 40rpx;
        }
      }
    }
  }

  // 底部
  .footer {
    position: absolute;
    bottom: 0;
    padding: 20rpx 32rpx;
    width: 100%;
    height: 132rpx;
    background: #FFFFFF;
    display: flex;

    .qxzf {
      width: 332rpx;
      height: 92rpx;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      border: 2rpx solid #3369FF;


      font-size: 32rpx;
      font-weight: 500;
      color: #3369FF;
      line-height: 90rpx;
    }

    .ljzf {
      width: 332rpx;
      height: 92rpx;
      background: #3369FF;
      border-radius: 8rpx 8rpx 8rpx 8rpx;

      font-size: 32rpx;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 90rpx;
    }
  }
</style>